<template>
	<view>
		<u-navbar :border-bottom="false" :is-back="false" :background="{background: '#255584'}">
			<view class="slot-wrap u-flex">
				<!-- 导航内容 -->
				<u-search :disabled="true" bg-color="rgba(200,200,200,.4)" search-icon-color="#fff"
					:input-style="{background: 'transparent'}" @click="toSearch" placeholder-color="#fff"
					placeholder="搜日记、搜话题、搜人" margin="10rpx" :show-action="false"></u-search>
				<view class="bell-wrp u-flex" @click="toNotice">
					<u-badge is-dot bgColor="#F7E45B" is-center v-if="newMsgFlag"></u-badge>
					<u-icon name="bell" color="#fff" size="44"></u-icon>
				</view>
			</view>
		</u-navbar>
		<!-- 头部卡片资料开始 -->
		<view class="headerCard">
			<view class="cardAvatar">
				<image :src="userData.avatar" mode="aspectFill" v-if="userData.avatar"></image>
				<img src="https://app.zbzedu.com/static/WaChat/img/photo.png" mode="aspectFill" v-if="!userData.avatar" />
			</view>
			<view class="cardUserInfo">
				<view class="userName">
					<text>{{userData.nickName || userData.userName || ''}}</text>
				</view>
				<view class="userGrade">
					<text>所在年级：{{userData.className || '未填写'}}</text>
				</view>
			</view>
			<view class="cardDz">
				<view class="dzTag" @click="tologin">
					<text>{{isLogin?'更新日记':'登录'}}</text>
				</view>
				<view class="dzNum">
					<text>获赞 {{allLikeNum}}</text>
				</view>
			</view>
		</view>
		<!-- 头部卡片资料结束 -->
		<!-- 发布按钮开始 -->
		<view class="fabu" @click="toFabu">
			<img src="https://app.zbzedu.com/static/WaChat/icon/forum/publish.png" mode="" />
		</view>
		<!-- 发布按钮结束 -->
		<!-- 个人日记板块开始 -->
		<view class="userLog">
			<!-- <view class="logTitle u-m-b-18">
				<text class="u-font-32 font-b u-p-l-30">日记最新动态</text>
			</view>
			<Diary :user-info="userData" :info-data="firstDiary" :showHeader="false"
				@like-change="res => firstDiary = res" v-if="firstDiary.diaryDesc" :showTool="true" />
			<view  v-if="!firstDiary || !isLogin">
				<empty :btn-string="isLogin ? '暂无日记，快去更新吧!' : '登录'"
					:url="isLogin ? '/package/forum/personal' : '/pages/login/wx_login'" :showDataImg="false" :showBline="true" :showLine="false">
				</empty>
			</view> -->
			<Talk></Talk>
		</view>
		<!-- 日记模块开始 -->
		<view class="recommend">
			<view class="tagRecommend" style="width: 270rpx;padding-left: 30rpx">
				<u-tabs active-color="#101010" inactive-color="#a8a8a8" :show-bar="false" font-size="32"
					:list="recommendList" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			<u-gap height="2" bg-color="#EEEEEE"></u-gap>
			<view v-for="(item, index) in recomendData" :key="index">
				<Diary :showMore="true" :info-data="item" :user-info="item.compassNormalUser" @delete="deleteCallback(index)"
					@like-change="res => likeChange(index, res)" />
			</view>
			<loadMore :status="status" />
		</view>
	</view>
</template>

<script>
	import {
		getBackUrl
	} from '../../util/api'
	import {
		request
	} from "../../util/api";
	import Diary from "./components/Diary";
	import empty from "./components/empty.vue";
	import {
		getCurrentFullPath
	} from "../../util/util";
	import loadMore from '../../components/loadMore'
	import {
		CHECK_TOKEN
	} from '../../util/util'
// 引入话题组件
    import Talk from '../../components/Talk.vue'
	export default {
		name: 'index',
		components: {
			Diary,
			empty,
			loadMore,
			Talk
		},

		data() {
			return {
				userData: {},
				newMsgFlag: false,
				firstDiary: {},
				allLikeNum: 0,
				recommendList: [{
						name: "推荐"
					},
					{
						name: "最新"
					},
					{
						name: "关注"
					}
				],
				current: 0,
				recomendData: [],
				orderType: 1,
				status: 'loading',
				pageNum: 1,
				isLogin: CHECK_TOKEN()
			}
		},
		onShow() {
			this.getCurrentUser()
		},
		mounted() {
			this.getlist()
			this.status = 'loading'
			this.pageNum = 1
			this.recomendData = []
			this.getRecommendList()
		},

		onPullDownRefresh() {
			this.getlist()
			this.status = 'loading'
			this.pageNum = 1
			this.recomendData = []
			this.getRecommendList()
		},

		onReachBottom() {
			if (!this.status) {
				this.status = 'loading'
				this.getRecommendList()
			}
		},

		methods: {
			getCurrentUser() {
				let storage = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user')
				if(storage.userId){
					request({
						url: '/system/CompassDiary/getHeadDiary',
						method: "get"
					}).then(res => {
						const {
							compassNormalUser,
							newMsgFlag,
							allLikeNum,
							firstDiary
						} = res.data
						this.userData = compassNormalUser
						this.newMsgFlag = newMsgFlag
						this.allLikeNum = allLikeNum
						this.firstDiary = firstDiary
					})
					this.isLogin=true
				}else{
					this.userData={}
					this.isLogin=false
				}
			},
			tologin(){
				let url='/package/login/wx_login'
				if(this.isLogin){
					url='/package/forum/personal'
				}
				if (url) {
					this.$u.route({
						url: url.includes('wx_login') ? url + `?backUrl=${ getBackUrl() }` : url,
						type: url.includes('wx_login') ? 'reLaunch' : 'navigateTo'
					})
				}
			},
			deleteCallback(index) {
				this.getlist()
				this.recomendData.splice(index, 1)
			},

			likeChange(index, data) {
				const {
					likeFlag,
					likeNum
				} = data
				this.$set(this.recomendData[index], 'likeFlag', likeFlag)
				this.$set(this.recomendData[index], 'likeNum', likeNum)
			},

			getlist() {
				if (!CHECK_TOKEN()) {
					return
				}
				// 获取家长圈用户信息
				request({
					url: '/system/CompassDiary/getHeadDiary',
					method: "get"
				}).then(res => {
					const {
						compassNormalUser,
						newMsgFlag,
						allLikeNum,
						firstDiary
					} = res.data
					this.userData = compassNormalUser
					this.newMsgFlag = newMsgFlag
					this.allLikeNum = allLikeNum
					this.firstDiary = firstDiary
				})
			},

			// 获取推荐信息
			getRecommendList() {
				request({
					url: CHECK_TOKEN() ? '/system/CompassDiary/wxList/' + this.orderType :
						'/system/wx/CompassDiary/wxList/' + this.orderType,
					method: "get",
					not_loading: true,
					data: {
						pageNum: this.pageNum,
						pageSize: 10
					}
				}).then(res => {
					this.recomendData = this.recomendData.concat(res.rows)
					this.pageNum++
					if (this.recomendData.length >= res.total) {
						this.status = 'finished'
					} else {
						this.status = ''
					}
					uni.stopPullDownRefresh()
				})
			},

			// 改变推荐类型
			change(index) {
				this.current = index
				this.orderType = index + 1
				this.status = 'loading'
				this.pageNum = 1
				this.recomendData = []
				this.getRecommendList()
			},

			toFabu() {
				uni.navigateTo({
					url: "/package/forum/publish"
				})
			},

			toNotice() {
				this.$u.route({
					url: '/package/forum/notice'
				})
			},

			toSearch() {
				this.$u.route({
					url: '/package/forum/search'
				})
			},
			// 转发功能
			onShareAppMessage(res) {
				return {
					path: getCurrentFullPath()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.bell-wrp {
		position: relative;
	}

	// 头部资料卡片样式
	.headerCard {
		height: 260rpx;
		padding: 20rpx;
		background-image: url('../../static/img/user_bg.png');
		background-size: cover;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #FFFFFF;

		.cardAvatar {
			border-radius: 100%;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .22), 0 0 6px rgba(0, 0, 0, .24);
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 90rpx;
			}

			margin-right: 30rpx;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .22),
			0 0 6px rgba(0, 0, 0, .24);
			border-radius: 90rpx;

		}

		.cardUserInfo {
			flex: 1;
			margin-left: 10rpx;

			.userName {
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.userGrade {
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.cardDz {
			display: flex;
			flex-direction: column;
			align-items: center;

			.dzTag {
				width: 148rpx;
				height: 62rpx;
				border-radius: 8rpx;
				background-color: #2A6CAC;
				line-height: 62rpx;
				text-align: center;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
		}
	}

	// 个人日记板块样式
	.userLog {
		.logTitle {
			color: rgb(16, 16, 16);
		}

		.logTag {
			margin: 22rpx 0;
			background-color: #EBEBEB;
			height: 52rpx;
			width: 196rpx;
			line-height: 52rpx;
			text-align: center;
			border-radius: 26rpx;

			.tagIcon {
				height: 32rpx;
				width: 32rpx;
				padding: 5rpx 10rpx;
				border-radius: 50%;
				color: #FFFFFF;
				background-color: #255584;
			}

			text {
				margin-left: 5rpx;
			}
		}

		.logContent {
			position: relative;

			.contentDetail {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}

			.more {
				position: absolute;
				top: 76rpx;
				right: 80rpx;
				color: #2A6CAC;
			}

			.ContentImgs {
				margin: 20rpx 0;
			}
		}
	}

	.recommend {
		.recommend {
			.tagRecommend {
				width: 240rpx;
			}
		}
	}

	.fabu {
		position: fixed;
		right: 28rpx;
		bottom: 130rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		height: 120rpx;
		z-index: 10;

		image {
			width: 100%;
			height: 100%;
		}

	}
</style>
